<!--
 * @Date: 2019-11-06 10:43:27
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2020-03-13 17:24:34
 -->
<template>
  <div class="home">
    <router-view></router-view>
    <van-tabbar v-model="active" fixed active-color="#DC4630" inactive-color="#666666">
      <van-tabbar-item @click="goHome">
        <span>首页</span>
        <svg-icon slot="icon" slot-scope="props" :icon-class="props.active?'首页-选中':'首页'"></svg-icon>
      </van-tabbar-item>
      <van-tabbar-item @click="goWork">
        <span>社区服务</span>
        <svg-icon slot="icon" slot-scope="props" :icon-class="props.active?'工作台-选中':'工作台'"></svg-icon>
      </van-tabbar-item>
      <van-tabbar-item @click="goIntegral">
        <span>积分</span>
        <svg-icon slot="icon" slot-scope="props" :icon-class="props.active?'我的积分-选中':'积分'"></svg-icon>
      </van-tabbar-item>
      <van-tabbar-item @click="goMine">
        <span>我的</span>
        <svg-icon slot="icon" slot-scope="props" :icon-class="props.active?'我的-选中':'我的'"></svg-icon>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      active: 0
    };
  },
  watch: {
    $route: "tabbarActive"
  },
  computed: {},
  created() {
    this.tabbarActive();
  },
  mounted() {},
  methods: {
    goHome() {
      this.$router.push({ name: "homePage" });
    },
    goWork() {
      this.$router.push({ name: "workstation" });
    },
    goIntegral() {
      this.$router.push({ name: "integral" });
    },
    goMine() {
      this.$router.push({ name: "mine" });
    },
    tabbarActive() {
      let route = this.$route.path.split("/")[2];
      switch (route) {
        case "homePage":
          this.active = 0;
          break;
        case "workstation":
          this.active = 1;
          break;
        case "integral":
          this.active = 2;
          break;
        case "mine":
          this.active = 3;
          break;
        default:
          this.active = 0;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: auto;
  color: #2c3e50;
  margin-bottom: 1.333333rem;
}
</style>